<template>
  <scroll-view
    class="detailForm-wrap"
    :show-scrollbar="false"
    :scroll-x="true"
    :scroll-y="true"
  >
    <tm-table
      :table-data="tableList"
      :width="tableWidth"
      :cell-width="cellWidth"
      :stripe="stripe"
      :showHeader="showFixed"
      :headerHeight="80"
    ></tm-table>
  </scroll-view>
</template>
<script lang="ts" setup>
import { CustomFormType } from '../../workTypes'
import { computed, ref } from 'vue'
import OrgCtrl from '@/ts/controller'
import { model } from '@/ts/base'

const showFixed = ref(true)
const stripe = ref(false)
type IProps = {
  formInfo: CustomFormType
}
const props = defineProps<IProps>()
console.log(props, 'props')
// 主表数据
const tableList = computed(() => {
  const table: any = []
  const header: any = []
  const columns: any = []
  // const result:Object = {}
  const headOpts = {
    opts: {
      color: '#f5f5f5'
    }
  }
  if (props.formInfo) {
    header.push({
      field: 'id',
      name: '唯一标识',
      ...headOpts
    })
    header.push({
      field: 'name',
      name: '标题',
      ...headOpts
    })
    columns.push('id')
    columns.push('name')
    props.formInfo.fields.forEach((item: { id: any; name: any }) => {
      const jsons = {
        field: item.id,
        name: item.name,
        ...headOpts
      }
      header.push(jsons)
      columns.push(item.id)
    })

    props.formInfo?.data[0].after.forEach((item: any) => {
      const keyArry: any = Object.keys(item)
      let _value: any = ''
      let fieldsData: any = {}
      keyArry.forEach((items: any) => {
        fieldsData = props.formInfo.fields!.find(v => v.id === items)
        if (fieldsData) {
          _value = getFieldText(item, fieldsData)
          item[items] = _value
        }
      })
      table.push(item)
    })
  }
  return { fields: { columns: columns }, header: header, data: table }
})
console.log(tableList,'tableList')
function getFieldText(_data: any, _fields: model.FieldModel) {
  const _value = _data[_fields.id]
  switch (_fields.valueType) {
    case '描述型':
    case '日期型':
    case '时间型':
    case '数值型':
      return _value ?? '-'
    case '选择型':
    case '分类型': {
      // console.log(_fields.lookups!.find(v => v.value === _value)?.text,'=====result')
      return _fields.lookups!.find(v => v.value === _value)?.text
    }
    case '用户型':
      return OrgCtrl.user.findShareById(_value)?.name
    default:
      return _value ?? '-'
  }
}
// 计算table宽度
const cellWidth = ref<number>(160)
const tableWidth = computed(() => {
  return uni.$tm.u.torpx(tableList.value.header.length * cellWidth.value)
})
</script>

<style lang="scss">
.detailForm-wrap {
}
</style>
